<template>
  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="字段名称">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item label="字段类型">
      <a-select
        v-model:value="formState.optionsValue"
        :size="size"
        style="width: 200px"
        :options="options"
      ></a-select>
    </a-form-item>
    <a-form-item label="是否必填">
      <a-radio-group v-model:value="formState.type">
        <a-radio value="是">是</a-radio>
        <a-radio value="否">否</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="日期类型">
      <a-radio-group v-model:value="formState.resource">
        <a-radio value="年-月">年-月</a-radio>
        <a-radio value="年-月-日">年-月-日</a-radio>
        <a-radio value="年-月-日-时分">年-月-日-时分</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="选项">
      <a-input v-model:value="formState.desc" type="textarea" />
    </a-form-item>
    <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">确定</a-button>
    </a-form-item> -->
  </a-form>
</template>
<script>
import { defineComponent, reactive, ref, toRaw } from "vue";
export default defineComponent({
  props: ["msg"],
  setup(props) {
    console.log(props);
    // onMounted((props) => {
    //
    // })

    const formState = reactive({
      id: props.msg.id,
      name: props.msg.name,
      type: props.msg.must,
      resource: '',
      desc: props.msg.choose,
      optionsValue: props.msg.type
    });

    const options = ref([{
      value: '单行文本',
    }, {
      value: '日期',
    }, {
      value: '下拉菜单',
    }]);
    const onSubmit = () => {
      console.log("submit!", toRaw(formState));
    };
    const onClick = ({ key }) => {
      console.log(`Click on item ${key}`);
    };
    const popupScroll = () => {
      console.log('popupScroll');
    };
    return {
      labelCol: {
        style: {
          width: "150px",
        },
      },
      wrapperCol: {
        span: 14,
      },
      formState,
      onSubmit,
      onClick,
      options,
      popupScroll
    };
  },
});
</script>